<template>
  <div style="background-color: white; margin-top: -5px">
    <van-form @submit="submitForm" readonly>
      <van-field
        v-model="form.projectOn"
        label="项目编号"
        placeholder="立项表提交后自动生成"
        readonly
      />
      <van-field
        v-model="form.projectName"
        label="项目名称"
        placeholder="请输入项目名称"
        :rules="[{ required: true, message: '请输入项目名称' }]"
      />
      <DeptTreePicker
        ref="treePicker"
        v-model="form.deptId"
        label="所属部门"
        :rules="[{ required: true, message: '请选择归属部门' }]"
      />
      <van-field
        v-model="form.projectTime"
        label="立项时间"
        placeholder="请选择立项时间"
        :rules="[{ required: true, message: '立项时间不能为空' }]"
      />
      <searchable-picker
        v-model="form.applyUser"
        :columns="userList"
        valueKey="userId"
        labelKey="userName"
        label="申请人"
        placeholder="请选择申请人"
        :rules="[{ required: true, message: '申请人不能为空' }]"
        readonly
      />
      <searchable-picker
        v-model="form.chargeUser"
        multiSelect
        :columns="userList"
        valueKey="userId"
        labelKey="userName"
        label="负责人"
        placeholder="请选择负责人"
        :rules="[{ required: true, message: '负责人不能为空' }]"
        readonly
      />
      <searchable-picker
        v-model="form.nature"
        :columns="dict.type.crm_order_nature"
        valueKey="value"
        labelKey="label"
        label="项目性质"
        placeholder="请选择项目性质"
        :rules="[{ required: true, message: '项目性质不能为空' }]"
        readonly
      />
      <searchable-picker
        v-model="form.nature"
        :columns="dict.type.crm_order_contracts"
        valueKey="value"
        labelKey="label"
        label="签订单位"
        placeholder="请选择签订单位"
        :rules="[{ required: true, message: '签订单位不能为空' }]"
        readonly
      />
      <van-field
        v-model="form.startTime"
        label="开始日期"
        placeholder="请选择开始日期"
        :rules="[{ required: true, message: '开始日期不能为空' }]"
      />

      <van-field
        v-model="form.endTime"
        label="结束日期"
        placeholder="请选择结束日期"
        :rules="[{ required: true, message: '结束日期不能为空' }]"
      />

      <searchable-picker
        v-model="form.customerId"
        :columns="customerList"
        valueKey="customerId"
        labelKey="customerName"
        label="客户名称"
        placeholder="点击选择客户名称"
        :rules="[{ required: true, message: '客户不能为空' }]"
        readonly
      />

      <van-field
        v-model="form.projectSum"
        label="项目金额"
        type="number"
        placeholder="请输入项目金额"
        :rules="[{ required: true, message: '项目金额不能为空' }]"
      />

      <van-field
        v-model="form.profit"
        label="预计利润"
        type="number"
        placeholder="请输入预计利润"
        :rules="[{ required: true, message: '预计利润不能为空' }]"
      />

      <van-field
        v-model="form.profitMargin"
        label="利润率"
        type="number"
        placeholder="填写预计利润后自动计算"
        readonly
      />

      <van-field
        v-model="form.paymentTime"
        label="付款方式"
        placeholder="请输入付款方式"
        :rules="[{ required: true, message: '付款方式不能为空' }]"
      />
      <div class="details">
        <div class="details-header">项目预算成本费用支出</div>
        <van-collapse
          v-model="activeNames"
          class="product"
          v-for="(details, index) in form.detailsList"
          :key="index"
        >
          <van-collapse-item
            :title="'详情' + (index + 1)"
            :name="index + 1"
            icon="ellipsis"
            class="details-body"
          >
            <van-field name="checkbox" label="无明细">
              <template #input>
                <van-checkbox
                  v-model="details.isRequired"
                  shape="square"
                  disabled
                />
              </template>
            </van-field>
            <searchable-picker
              v-model="details.detailsType"
              :columns="dict.type.crm_fee_type"
              :readonly="details.flag === '1'"
              :disabled="details.isRequired"
              valueKey="value"
              labelKey="label"
              label="费用类型"
              placeholder="点击选择费用类型"
              readonly
              :rules="[{ required: true, message: '费用类型不能为空' }]"
            />
            <van-field
              v-model="details.detailsName"
              label="费用名称"
              placeholder="请输入费用名称"
              :rules="[
                { required: !details.isRequired, message: '费用名称不能为空' },
              ]"
              :readonly="details.flag === '1'"
              :disabled="details.isRequired"
            />
            <van-field
              v-model="details.detailsDesc"
              label="费用描述"
              placeholder="请输入费用详情描述"
              :disabled="details.isRequired"
            />
            <van-field
              v-model="details.detailsAmount"
              label="预算合计"
              placeholder="请输入预算合计"
              :rules="[
                { required: !details.isRequired, message: '预算合计不能为空' },
              ]"
              :disabled="details.isRequired"
            />
            <van-field
              v-model="details.remark"
              label="备注"
              placeholder="请输入备注"
              :disabled="details.isRequired"
            />
          </van-collapse-item>
        </van-collapse>
        <div style="height: 10px; background-color: #eceff2"></div>
      </div>
      <van-field
        v-model="form.aggregationCharge"
        label="费用总计"
        placeholder="请输入备注"
        type="number"
        readonly
      />
      <van-field
        v-model="form.opinion"
        label="管理层意见"
        placeholder="请输入管理层意见"
        readonly
      />
      <van-field name="uploader" label="文件上传" style="margin-bottom: 50px">
        <template #input>
          <file-upload v-model="form.url" disabled/>
        </template>
      </van-field>
      <div class="mobile-footer">
        <van-button
          type="info"
          native-type="submit"
          style="width: 90%; border-radius: 10px"
          >办理</van-button
        >
      </div>
    </van-form>
    <auditComponent ref="auditComponent" @handle="handleBtn"></auditComponent>
  </div>
</template>

<script>
import { getOrderRegister, audit } from "@/api/crm/orderRegister";
import { getCrmCustomerAllNoPage } from "@/api/crm/customer";


import { getUserListByStatus } from "@/api/system/user";

import auditComponent from "../components/auditComponent.vue";
export default {
  name: "Approve",
  dicts: ["crm_order_nature", "crm_order_contracts", "crm_fee_type"],
  components: {
    auditComponent
  },
  data() {
    return {
      deptOptions: [],
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 指定跳转节点
      nodeCode: "",
      customerList: [],
      orderList: [],
      activeNames: [],
      value: '',
      taskId: ''
    };
  },
  created() {
    this.value = this.$route.query.value;
    this.taskId = this.$route.query.taskId;
    this.getUserListByStatus();
    this.getCrmCustomerAllNoPage()
    this.getOrderRegister();
  },
  methods: {
    getUserListByStatus() {
      getUserListByStatus({ status: "0" }).then((res) => {
        this.userList = res.data;
      });
    },
    getCrmCustomerAllNoPage() {
      getCrmCustomerAllNoPage({}).then((res) => {
        this.customerList = res.data;
      });
    },
    async getOrderRegister() {
      await getOrderRegister(this.value).then((response) => {
        if (!response.data) {
          this.$modal.alertWarning("代办任务不存在");
        }
        this.form = response.data;
        this.form.chargeUser = this.form.chargeUser ? this.form.chargeUser.split(",") : null;
        this.coverCheck(false);
        this.buildActiveNames(this.form.detailsList)
      });
    },
    coverCheck(flag = true) {
      if (flag) {
        this.form.detailsList.forEach((item) => {
          item.isRequired = item.isRequired ? "1" : "0";
        });
      } else {
        this.form.detailsList.forEach((item) => {
          item.isRequired = item.isRequired === "1";
        });
      }
    },
    buildActiveNames(arr) {
      this.activeNames = [];
      for (let i = 1; i <= arr.length; i++) {
        this.activeNames.push(i);
      }
    },
    submitForm(){
      this.$refs.auditComponent.open();
    },
    /** 审核通过按钮 */
    handleBtn(obj) {
        this.form.taskId = this.taskId;
        this.form.message = obj.message
        this.form.signature = obj.signature
        this.form.skipType = obj.skipType
        this.form.chargeUser = null
        audit(this.form).then((response) => {
          this.$toast.success("办理成功");
          this.$router.replace("/flow/todo")
        }); 
    },
  },
};
</script>

<style scoped  lang="scss">
.submitButton {
  width: 95%;
  height: 50px;
  position: fixed;
  top: 90%;
  left: 10px;
}

::v-deep .van-collapse-item__content {
  padding: 0;
}

::v-deep .product .van-collapse-item__title {
  background-color: #eceff2;
  padding: 5px 16px;
}

.details {
  border-bottom: 1px solid #eceff2;

  .details-header {
    padding: 10px 16px 3px;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
  }

  .details-footer {
    text-align: center;
    .el-button--text {
      font-size: 18px;
    }
  }

  .details-body {
    position: relative;
  }

  .details-button {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 35px;
  }
}
</style>